import React from 'react';
import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
import {connect} from 'react-redux';
import {getRealSize, Touchable} from '../../utils';
import FAIcon from 'react-native-vector-icons/FontAwesome5';
import _ from 'lodash';
import ThemeStyle from '../../styles';
import {I18n} from '../../reducers/intl';
import FastImage from 'react-native-fast-image';
import ImageZoomModal from '../../components/image-zoom-modal';

class OtherScreen extends React.Component {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.previewOther'),
  });

  state = {
    imageIndex: 0,
    imageModalVisible: false,
  };

  render() {
    const {form} = this.props;
    const files = Object.values(_.get(form, 'files', {}));
    const images = files.map(f => ({url: f.url}));
    return (
      <ScrollView style={Styles.container}>
        <View>
          <Text style={Styles.title}>
            {I18n.t('form.label.file.name')}
            {I18n.t('form.label.file.desc', {length: files.length})}
          </Text>
          {files.map((file, index) => (
            <FileCard
              {...file}
              key={file.uid}
              isImage={() => isImage(file.filename)}
              onPress={() =>
                this.setState({imageIndex: index, imageModalVisible: true})
              }
            />
          ))}
        </View>
        <View>
          <Text style={Styles.title}>{I18n.t('form.label.note')}</Text>
          <View style={Styles.noteContainer}>
            <Text style={Styles.noteLabel}>{form.note}</Text>
          </View>
        </View>
        <ImageZoomModal
          visible={this.state.imageModalVisible}
          images={images}
          index={this.state.imageIndex}
          onClose={() => this.setState({imageModalVisible: false})}
        />
      </ScrollView>
    );
  }
}

const isImage = fileName => {
  const flieArr = fileName.split('.');
  let suffix = flieArr[flieArr.length - 1];
  if (suffix != '') {
    suffix = suffix.toLocaleLowerCase();
    // 图片格式
    const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
    // 进行图片匹配
    return imglist.find(item => item === suffix);
  }
};

const FileCard = props => (
  <View style={Styles.fileContent}>
    <View style={Styles.fileImg}>
      {props.isImage ? (
        <Touchable onPress={() => props.onPress()}>
          <FastImage
            style={{width: getRealSize(48), height: getRealSize(48)}}
            source={{
              priority: FastImage.priority.normal,
              uri: props.url,
            }}
          />
        </Touchable>
      ) : (
        <FAIcon name="file" size={getRealSize(24)} color="#fff" />
      )}
    </View>
    <Text style={Styles.fileLabel} numberOfLines={1}>
      {props.filename}
    </Text>
  </View>
);

const mapStateToProps = state => ({
  user: state.user,
  form: state.orderForm,
});

export default connect(mapStateToProps, null)(OtherScreen);

const Styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    fontSize: getRealSize(16),
    fontWeight: 'bold',
    color: '#333',
    marginHorizontal: getRealSize(15),
    marginTop: getRealSize(15),
  },
  noteContainer: {
    marginHorizontal: getRealSize(15),
    backgroundColor: '#f7f7f7',
    borderRadius: getRealSize(4),
    padding: getRealSize(15),
    marginTop: getRealSize(15),
  },
  noteLabel: {
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
    lineHeight: getRealSize(18),
  },
  fileContent: {
    marginHorizontal: getRealSize(15),
    marginTop: getRealSize(15),
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    flex: 1,
    backgroundColor: '#f2f2f2',
  },
  fileImg: {
    width: getRealSize(64),
    height: getRealSize(64),
    alignItems: 'center',
    justifyContent: 'center',
  },
  fileLabel: {
    marginLeft: getRealSize(16),
    fontSize: getRealSize(16),
    fontWeight: '400',
    color: '#999999',
    flex: 1,
  },
});
